<!-- 通讯录 -->
<template>
  <div class="address-book-content">
    <div class="nav-open_box">
      <chat-search
        style="padding: 0 12px"
        type="groupAndName"
        @select="handleSearchSelect"
        placeholder="搜索群名/姓名"
      ></chat-search>
      <div class="nav_user_box">
        <h3>群聊</h3>
        <chat-group @selectedChange="selectedChange"></chat-group>
        <h3>联系人</h3>
        <!-- <contact-tree
          @userChange="userChange"
          :showCheckbox="false"
        ></contact-tree> -->
        <contact></contact>
      </div>
    </div>
    <div class="ready-send_box">
      <template v-if="isGroup">
        <readyGorupContent :content="selectedData"></readyGorupContent>
      </template>
      <template v-else>
        <readyContactContent :userInfo="userInfo"></readyContactContent>
      </template>
    </div>
  </div>
</template>

<script>
import contactTree from "../common/contactTree.vue"
import chatSearch from "../common/search.vue"
import readyContactContent from "../content/readyContactContent.vue"
import readyGorupContent from "../content/readyGorupContent.vue"
import Contact from "../sidebar/contact.vue"
import chatGroup from "../sidebar/group.vue"

export default {
  components: {
    chatSearch,
    chatGroup,
    readyGorupContent,
    readyContactContent,
    Contact
  },
  data() {
    return {
      searchValue: "",
      isGroup: true,
      selectedData: {},
      userInfo: {}
    }
  },

  methods: {
    selectedChange(data) {
      this.isGroup = true
      this.selectedData = data
    },
    userChange(data) {
      this.isGroup = false
      this.userInfo = data
    },
    handleSearchSelect(item) {
      if (item.memberList) {
        this.selectedChange(item)
      } else {
        this.userChange(item)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.address-book-content {
  display: flex;

  .nav-open_box {
    .nav_user_box {
      overflow: auto;
    }
    padding: 12px 0;
    width: 280px;

    height: 100%;

    display: flex;
    flex-direction: column;
    h3 {
      font-size: 14px;
      color: #333333;
      text-align: left;
      margin: 12px;
      font-weight: 600;
    }
  }

  .ready-send_box {
    flex: 1;
    background: #f7f8fa;
  }
}
</style>
